This chart uses two canvas tags - one for the background and axes and another for the the actual scrolling Line. This saves on the cost f drawing each frame - but how much and whether it's noticeable is dependent on many factors.
<script src="RGraph.common.core.js"></script> <script src="RGraph.line.js"></script>Put this where you want the chart to show up:
<div style="position: relative; width: 600px; height: 250px">
<canvas id="cvs1" width="600" height="250" style="position: absolute; top: 0; left: 0" data-l="false">[No canvas support]</canvas>
<canvas id="cvs2" width="600" height="250" style="position: absolute; top: 0; left: 0" data-l="false">[No canvas support]</canvas>
</div>
This is the code that generates the chart:
<script>
window.onload = function ()
{
/**
* Define the varibles that we're going to use
*/
// Refresh rate (in milliseconds - 1000 per second)
//
// *** This is not actually used on this page because ***
// *** setTimeout is not used - requestAnimationFrame ***
// *** is used instead which handles the time for you ***
var delay = 40;
// Number of points shown on the chart
var points = 1200;
// Number of points shown on the chart
var data = new Array(points);
// A shortcut reference to the global RGraph object
var RG = RGraph;
// A shortcut reference to the global Math object
var ma = Math;
// Max Y value on the chart
var max = 100;
// min Y value on the chart
var min = 0;
// Halfway between the min and max
var num = (( (max - min) / 2) + min);
// Generate the labels that are across the X axis. Hard-coded sadly...
var labels = ['20s', '18s','16s','14s','12s','10s','8s','6s','4s','2s','0s'];
// The increase/decrease of each iteration
var delta = 2;
/**
* Draw the chart. On subsequent draws this chart is updated with new data and
* redrawn This is faster than creating a whole new object and drawing that.
*/
var objbg = new RGraph.Line({
id: 'cvs1',
data: [],
options: {
gutterLeft: 35,
ymax: max,
tickmarks: null,
linewidth: 1,
shadow: null,
backgroundGridVlines: false,
backgroundGridBorder: false,
backgroundGridColor: '#eee',
color: 'black',
numxticks: 5,
axisColor: '#666',
textColor: '#666',
colors: ['red'],
noxaxis: true,
ylabels: false,
textAccessible: true
}
}).draw();
/**
* Draw the chart. On subsequent draws this chart is updated with new data and
* redrawn This is faster than creating a whole new object and drawing that.
*/
var obj = new RGraph.Line({
id: 'cvs2',
data: data,
options: {
gutterLeft: 35,
ymax: max,
tickmarks: null,
linewidth: 1,
shadow: null,
backgroundGrid: false,
colors: ['red'],
noxaxis: true,
noyaxis: true,
labels: labels,
textAccessible: true
}
}).draw();
/**
* This is the main draw function that is called multiple times per
* second to update the chart with new data. It:
*
* 1. Clears the canvas so that it's ready to be drawn on again
* 2. .shift()s a piece of data off of the rear of the Line chart internal data
* variable
* 3. .push()s a new piece of data on to the end of the same array
* 4. Draws the chart again
*/
function draw()
{
// Clear (NOT reset) the canvas
RG.clear(obj.canvas);
// Generate a random number between -5 and 5 and add it to the num
// variable. Adding asmall change instead of generating a whole new
// number result in a gentler change.
num += RG.random(-1 * delta, delta);
// Limit the num variable to min - max
num = ma.max(min, num);
num = ma.min(max, num);
// Remove a number from the front of the data array
obj.original_data[0].shift();
// Add the new number on to end of the data array
obj.original_data[0].push(num);
// Draw the chart
obj.draw();
// Call this function again after the delay (using requestAnimationFrame
// NOT setTimeout) This function is a compatibility wrapper around
// requestAnimationFrame
RG.Effects.updateCanvas(draw);
}
draw();
};
</script>